<template>
    <div id="container">
        <mt-header class="top" title="智能客服" style="background:#fff;border-bottom:1px solid #bbb;height:6vh;color:#101010">  
            <mt-button icon="back" slot="left" @click="btn1()" style="display:inline-block;text-indent:5px;"></mt-button>
        </mt-header>
    
        <ul class="content" ref="charView">
            <li>
                <img src="../../assets/images/kefu.jpg" class="imgleft">
                <span class="spanleft">
                    <div class="pb-2">您好~ 我是机器人小园，很高兴为您服务！</div>
                    <div>您是否要咨询以下问题：</div>
                    <div class="text-primary fs-xl pt-2">
                        <div class="pt-1" v-for="(item,i) in problemList" :key="i" @click="postProblem(i)">
                            {{item}}
                        </div>
                    </div>
                </span>
            </li>
            <li v-for="(item, index) in messageList" :key="index" @click="toDoctor(item.url)">
                <img v-if="!item.myself" src="../../assets/images/kefu.jpg" class="imgleft">
                <img v-if="item.myself" :src="user.haedPic" class="imgright">
                <span :class="'span'+(item.myself?'right':'left')" v-html="item.message"></span>
                
            </li>
        </ul>
        <div class="footer">
            <input id="text" type="text" v-model.trim="inputValue" @keyup.enter='chat' placeholder="">
            <span id="btn" @click="btn2()">发送</span>
        </div>
    </div>
</template>

<script>
export default{
    name:'Kefu',
    data() {
        return {
             //输入的内容,事先约定好的
            inputValue: '',
            //聊天的数组内容
            messageList: [


            ],
            scrollHeight: 0,
            user:{},
            num: 0,
            problemList: [
             '1.忘记登录密码怎么办？',
             '2.支付方式有哪些？',
             '3.收不到验证码怎么办？',
             '4.你们的药是正品吗？'
            ]

        }
    },//点击回车时候发送信息
    updated:function(){
    	this.scrollToBottom();
    },
    created(){
    	this.user = this.$store.getters.userInfo; 
    },
    methods: {
        //页面置顶
       scrollToBottom() {
           this.$nextTick(() => {
              var container =this.$refs.charView;

              container.scrollTop = container.scrollHeight;
          })},
           toDoctor(url){
            if (url) {
                this.$router.push(url);
            }
        },
        //发送问题
        postProblem(i){
            this.messageList.push({
                    message: this.problemList[i],
                    //这个是判断当前是否是自己输入的内容,自己的是true,机器人的是false
                    myself: true
                })
            //发请求
            this.$http.post('user/wulaiBot/getCustomerAnswer.do',{
                        question: this.problemList[i]
                        }).then(res => {
                            console.log(res)
                            this.messageList.push({

                                message: res.data.answer,
                                myself: false
                            });
                            this.scrollToBottom()
                            this.$refs.charView.scrollTop=10000;
                            
                            /*if (res.data.answer) {
                                if (res.data.answer.indexOf('抱歉') != -1) {
                                    this.num++
                                    if (this.num >= 3) {
                                    this.messageList.push({

                                        message: `<div class="d-flex"><div>未能解决问题？</div><div style="color: red;text-decoration:underline"> 去人工服务窗口</div></div>`,
                                        myself: false,
                                        url: '/doctorBot'
                                    });
                                }
                                }
                            }*/
                            
                        })

        },
            chat() {
                this.messageList.push({
                    message: this.inputValue,
                    //这个是判断当前是否是自己输入的内容,自己的是true,机器人的是false
                    myself: true
                })
                //每次发送信息之后机器人就要回复,所以添加完之后直接调用机器人的接口
                this.$http.post('user/wulaiBot/getCustomerAnswer.do',{
                        question: this.inputValue,
                        }).then(res => {
                            console.log(res)
                        	this.messageList.push({

                        		message: res.data.answer,
                        		myself: false
                        	});
                        	this.scrollToBottom()
                        	this.$refs.charView.scrollTop=10000;
                            
                            /*if (res.data.answer) {
                                if (res.data.answer.indexOf('抱歉') != -1) {
                                    this.num++
                                    if (this.num >= 3) {
                                    this.messageList.push({

                                        message: `<div class="d-flex"><div>未能解决问题？</div><div style="color: red;text-decoration:underline"> 去人工服务窗口</div></div>`,
                                        myself: false,
                                        url: '/doctorBot'
                                    });
                                }
                                }

                                
                            }*/
                            
                        })
                
                this.inputValue=""
            },
            btn1(){
                this.$router.go(-1)
            },
            btn2(){
                
                this.messageList.push({
                    message: this.inputValue,
                    //这个是判断当前是否是自己输入的内容,自己的是true,机器人的是false
                    myself: true
                })
                this.$http.post('user/wulaiBot/getCustomerAnswer.do',{
                    question: this.inputValue,
                    
                        }).then(res => {

                        	this.messageList.push({
                        		message: res.data.answer,
                        		myself: false
                        	});



                            /*if (res.data.answer) {
                                if (res.data.answer.indexOf('抱歉') != -1) {
                                    this.num++
                                }

                                if (this.num >= 3) {
                                    this.messageList.push({

                                        message: `<div class="d-flex"><div>未能解决问题？</div><div style="color: red;"> 去人工服务窗口</div></div>`,
                                        myself: false,
                                        url: '/doctorBot'
                                    });
                                }
                            }*/
                        	
                        })
                        
                this.inputValue=""
                
            }
           

         },
         mounted() {
             this.box=this.$refs.charView;
             this.scrollToBottom();
         },
}
</script>
<style scoped>


     * {    
            margin: 0;
            padding: 0;
            list-style: none;
            font-family: '微软雅黑'
        }
        .top{
        	width: 100%;
        	position: fixed;
        	top: 0;
            z-index: 99;
        }
        #container {
            width: 100vw;
            height: 100vh;
            background: #fafafa;
            position: relative;
            box-shadow: 20px 20px 55px #777;
        }
        .header {
        	
            background: #000;
            height: 40px;
            color: #fff;
            line-height: 34px;
            font-size: 20px;
            padding: 0 10px;
        }
        .footer {
            width: 100vw;
            height: 4.2rem;
            background-color: #edeff0;
            position: fixed;
            bottom: 0;
            overflow: hidden;
            
        }
        .footer input {
            margin-top: 10px;
            width: 70vw;
            height: 40px;
            outline: none;
            font-size: 20px;
            text-indent: 10px;
            position: absolute;
            border-radius: 6px;
           margin-left: 10px;
        }
        
        .footer span {
            margin-top: 10px;
            display: inline-block;
            width: 20vw;
            height: 40px;
            background: #ccc;
            font-weight: 900;
            line-height: 40px;
            cursor: pointer;
            text-align: center;
            position: absolute;
            right: 10px;
            border-radius: 6px;
        }
        .footer span:hover {
            color: #fff;
            background: #999;
        }
        #user_face_icon {
            display: inline-block;
            background: red;
            width: 60px;
            height: 60px;
            border-radius: 30px;
            position: absolute;
            bottom: 6px;
            left: 14px;
            cursor: pointer;
            overflow: hidden;
        }
        img {
            width: 50px;
            height: 50px;
        }
        .content {
            font-size: 20px;
            width: 100vw;
            height: 100vh;
            padding-top: 50px;
            padding-bottom: 80px;
            overflow: auto;
          
        }
        .content li {
            margin-top: 10px;
            display: block;
            clear: both;
            overflow: hidden;
        }
        .imgleft {
            float: left;
        }
        .imgright {
            float: right;
        }
        .content li span{
            background: #7cfc00;
            padding: 10px;
            border-radius: 10px;
            float: left;
            margin: 6px 10px 0 10px;
            max-width: 310px;
            word-break: break-all ;
        }
        
        .content li span.spanleft { 
            position: relative;
            float: left;
            background: #fff;
            line-height: 1.4rem;
        }
        .content li span.spanright { 
             position: relative;
            float: right;
            background: #7cfc00;
            line-height: 1.4rem;
        } 

        .spanleft::before{
            content: "";
            display: block;
            position: absolute;
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-right-color: #ffff;
            top: 11px;
            left: -18px;


        }
        .spanright::before{
            content: "";
            display: block;
            position: absolute;
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-left-color: #7cfc00;
            top: 11px;
            right: -18px;


        }
</style>
